// js代码
// 尝试发送请求
axios.get("/dashboard").then(({ data: res }) => {
  // console.log(res);
  // 解构方案一
  // let {
  //   message,
  //   data: { groupData, overview, provinceData, salaryData, year },
  // } = res;
  // console.log(overview);
  // 解构方案二
  let { groupData, overview, provinceData, salaryData, year } = res.data;
  // console.log(provinceData);

  // 设置概览区的数据
  // document.querySelector("[name = salary]").innerHTML = overview.salary;
  for (let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key];
  }

  // 调用创建图表的函数
  lineChart(year); //折线图
  pieChart(salaryData); //饼图
  barChart(groupData); //柱状图
  sexSalaryChart(salaryData); //饼图
  chinaMap(provinceData); //地图
});

// 折线图:全学科薪资走势
// 1. 盒子(id = 'line')
// 2. 引入echarts 文件
function lineChart(data) {
  // let itemPotion = {
  //   // name: "xx",
  //   value: 14000,
  //   symbolSize: 20,
  //   symbol: "image://http://www.itcbc.com:3006/formdata/123.png",
  // };
  // 3. 初始化
  let myChart = echarts.init(document.querySelector("#line"));
  // 4. 配置项
  let option = {
    // 标题配置
    title: {
      text: "2022全学科薪资走势",
      // 颜色 文字大小
      textStyle: {
        // color: "",
        fontSize: 16,
      },
      // 位置
      left: 10,
      top: 15,
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.month),
      // x轴文字
      axisLabel: {
        color: "#999",
      },
      // 轴线
      axisLine: {
        lineStyle: {
          color: "#ccc",
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "value",
      // y轴分割线
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    // 鼠标移入提示
    tooltip: {
      // axis 表示鼠标移入轴线所在区域,提示
      trigger: "axis",
    },
    // 网格配置
    gird: {
      top: "20%",
    },
    series: [
      {
        data: data.map((item) => item.salary),
        type: "line",
        smooth: true, //平滑曲线
        lineStyle: {
          width: 6,
        },
        // 标记的拐点大小
        symbolSize: 10,
        // 区域颜色配置
        areaStyle: {
          color: {
            type: "linear", //渐变类型是线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#499FEE", // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "rgba(255,255,255,0.2)", // 80% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
    // 线条颜色
    color: {
      type: "linear", //渐变类型是线性渐变
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: "#499FEE", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#5D75F0", // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
  };
  // 5. 创建图表
  myChart.setOption(option);
}

// 饼图: 班级平均薪资
function pieChart(data) {
  let myChart = echarts.init(document.querySelector("#salary"));
  let option = {
    // 标题
    title: {
      text: "班级薪资分布",
      // 颜色 文字大小
      textStyle: {
        // color: "",
        fontSize: 16,
      },
      // 位置
      left: 10,
      top: 15,
    },
    // 鼠标移入提示
    tooltip: {
      trigger: "item",
    },
    // 图例
    legend: {
      bottom: "6%",
      left: "center",
    },
    // 颜色的设置
    color: ["#FDA224", "#5097FF", "#3ABCFA", "#34D39A"],
    // 系列数据
    series: [
      {
        name: "班级薪资分布",
        type: "pie",
        center: ["50%", "50%"], //中心点坐标
        radius: ["50%", "64%"], //内外圈半径
        // avoidLabelOverlap: false,
        // 每一项的样式(每个扇形区域的样式)
        itemStyle: {
          borderRadius: 10, //圆角
          borderColor: "#fff", //边框颜色
          borderWidth: 2, //边框大小
        },
        // 文字
        label: {
          show: false, //每个扇形的描述文字,不显示
          // position: "center",
        },
        // 视觉引导线
        labelLine: {
          show: false, //标签文字引导线,不需要
        },
        data: data.map((item) => {
          return { value: item.g_count + item.b_count, name: item.label };
        }),
      },
    ],
  };
  myChart.setOption(option);
}

// 柱状图: 班级每组薪资
function barChart(data) {
  let myChart = echarts.init(document.querySelector("#lines"));

  let option = {
    // 网格配置
    grid: {
      left: 70,
      top: 30,
      right: 30,
      bottom: 50,
    },
    // 鼠标移入提示
    tooltip: {
      // axis 表示鼠标移入轴线所在区域,提示
      // trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: data[1].map((item) => {
        return item.name;
      }),
      // 轴线
      axisLine: {
        lineStyle: {
          color: "#ccc",
          type: "dashed",
        },
      },
      // x轴文字
      axisLabel: {
        color: "#999",
      },
    },
    yAxis: {
      type: "value",
      // y轴分割线
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: data[1].map((item) => {
          return item.hope_salary;
        }),
        type: "bar",
        name: "期望薪资", // 这个数据的名字，可以在鼠标移入的提示上显示
        // 区域颜色配置
        itemStyle: {
          color: {
            type: "linear", //渐变类型是线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#34D39A", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(52,211,154,0.2)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        data: data[1].map((item) => {
          return item.salary;
        }),
        type: "bar",
        name: "就业薪资", // 这个数据的名字，可以在鼠标移入的提示上显示
        // 区域颜色配置
        itemStyle: {
          color: {
            type: "linear", //渐变类型是线性渐变
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#499FEE", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(73,159,238,0.2)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  myChart.setOption(option);

  // 事件委托
  document.querySelector("#btns").addEventListener("click", function (e) {
    if (e.target.tagName === "BUTTON") {
      // 说明点击了某个按钮
      let i = e.target.innerHTML;
      console.log(i); //组号
      // 排他思想处理选中效果
      document.querySelector("#btns .btn-blue").classList.remove("btn-blue");
      e.target.classList.add("btn-blue");
      // 更换图表中的数据(点击的是第几组,就展示第几组的数据)
      option.xAxis.data = data[i].map((item) => {
        return item.name;
      });
      option.series[0].data = data[i].map((item) => {
        return item.hope_salary;
      });
      option.series[1].data = data[i].map((item) => {
        return item.salary;
      });
      myChart.setOption(option);
    }
  });
}

// 左下饼图 : 男女薪资分布
const sexSalaryChart = (data) => {
  const myChart = echarts.init(document.querySelector("#gender"));
  const option = {
    // 标题配置
    title: [
      {
        text: "男女薪资分布",
        // 颜色 文字大小
        textStyle: {
          // color: "",
          fontSize: 16,
        },
        // 位置
        left: 10,
        top: 10,
      },
      {
        text: "男生",
        // 距离顶部45%，距离左边45%，文字大小12
        // 颜色 文字大小
        textStyle: {
          // color: "",
          fontSize: 12,
        },
        // 位置
        left: "45%",
        top: "45%",
      },
      {
        text: "女生",
        // 距离顶部85%，距离左边45%，文字大小12
        // 颜色 文字大小
        textStyle: {
          // color: "",
          fontSize: 12,
        },
        // 位置
        left: "45%",
        top: "85%",
      },
    ],
    tooltip: {
      trigger: "item",
    },
    // 图例
    // legend: {
    //   top: "5%",
    //   left: "center",
    // },
    series: [
      {
        name: "男生薪资分布",
        type: "pie",
        radius: ["20%", "30%"],
        center: ["50%", "30%"],
        data: data.map((item) => {
          return { value: item.b_count, name: item.label };
        }),
      },
      {
        name: "女生薪资分布",
        type: "pie",
        radius: ["20%", "30%"],
        center: ["50%", "70%"],
        data: data.map((item) => {
          return { value: item.g_count, name: item.label };
        }),
      },
    ],
  };
  myChart.setOption(option);
};

// 右下 : 中国地图分布
function chinaMap(data) {
  // 因为用地图表示每个省有几名同学
  // 所以可以提前准备好数据
  let mapData = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ];

  // 处理地图数据处理
  mapData.forEach((item) => {
    let res = data.find((v) => {
      return v.name.includes(item.name);
    });
    if (res) {
      item.value = res.value;
    }
  });
  console.log(mapData);

  let myChart = echarts.init(document.querySelector("#map"));
  let option = {
    // 标题配置
    title: {
      text: "籍贯分布",
      // 颜色 文字大小
      textStyle: {
        // color: "",
        fontSize: 16,
      },
      // 位置
      left: 10,
      top: 10,
    },
    // 鼠标移入提示
    tooltip: {
      // 自定义格式化
      formatter: "{b}：{c}位学员",
      backgroundColor: "rgba(0,0,0,0.5)",
      borderColor: "transparent",
      textStyle: {
        color: "#fff",
      },
    },
    // 视觉映射组件（visualMap）
    visualMap: {
      // 连续性
      type: "continuous",
      min: 0,
      max: 12,
      text: [12, 0],
      left: 40,
      bottom: 20,
      inRange: { color: ["#E0FFFF", "#0075F0"] },
    },
    series: {
      type: "map",
      name: "籍贯分布",
      map: "china",
      data: mapData,
      label: {
        show: true,
        fontSize: 10,
        color: "rgba(0,0,0,0.7)",
      },
      itemStyle: {
        borderColor: "rgba(0, 0, 0, 0.2)",
        areaColor: "#E0FFFF",
      },
      // 高亮状态下
      emphasis: {
        itemStyle: {
          areaColor: "#34D39A",
          borderWidth: 0,
          shadowBlur: 20,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  };
  myChart.setOption(option);
}
